class Element {
  constructor(type, attr, children) {
    this.type = type;
    this.attr = attr;
    this.children = children;
  }
  render() {
    // 这个方法将虚拟的DOM转成真实的DOM；
    let ele = document.createElement(this.type);
    // 设置行间属性
    for (const key in this.attr) {
      let _key = key;
      if (key === 'className') {
        _key = 'class';
      }
      if (key === 'htmlFor') {
        _key = 'for';
      }
      ele.setAttribute(_key, this.attr[key]);
    }
    // 处理children
    this.children.forEach((c) => {
      // 如果数组中的成员是Element的实例，需要调用render方法，将虚拟dom转化成真实dom
      //循环子节点，放入ele中
      let currEle =
        c instanceof Element ? c.render() : document.createTextNode(c);
      ele.appendChild(currEle);
    });

    return ele; // 将创建的dom元素返回
  }
}

let React = {
  createElement(type, attr, ...children) {
    // type: 元素类型
    // attr：行间属性
    // children : 子节点 ... 把多余的参数放进一个数组中；
    return new Element(type, attr, children);
  },
};

let ReactDOM = {
  render(element, container) {
    // container : 容器，根元素；
    // element: 虚拟的DOM对象；当render执行时，让这个虚拟的DOM转成真实的DOM；
    container.appendChild(element.render());
  },
};

let jsx = React.createElement(
  'div',
  { a: 1, className: 'xxx' },
  '我是中国人',
  '我爱中国'
);

ReactDOM.render(jsx, document.getElementById('container'));
